<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="plugin/layui/css/layui.css">
    <link rel="stylesheet" href="static/css/global.css">
    <link rel="stylesheet" href="plugin/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>
    <div class="childrenBody">
        <blockquote class="layui-elem-quote">
            <a href="javascript:;" class="layui-btn layui-btn-sm" id="add">
                <i class="layui-icon"></i> 添加信息
            </a>
            <a class="layui-btn layui-btn-sm layui-btn-danger" id="delAll">
                <i class="layui-icon"></i>批量删除
            </a>
        </blockquote>
        <fieldset class="layui-elem-field">
            <legend>数据列表</legend>
            <div class="layui-field-box layui-form" id="content">
                <table class="layui-hide" lay-filter="navDemo" id="test"></table>
            </div>
        </fieldset>
    </div>
    <script src="plugin/layui/layui.js"></script>
    <script>
        layui.use(['table'], function(){
            var table = layui.table
                ,form = layui.form
                ,$ = layui.jquery;
            //渲染表格
            table.render({
                elem: '#test'
                ,url:'./api/navTable.json'
                ,cellMinWidth: 30 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    {type:'checkbox'}
                    ,{field:'id', title: 'ID', sort: true}
                    ,{field:'nav_name', title: '导航名称'}
                    ,{fixed: 'right',title:'操作', width: 220, align: 'center', toolbar: '#toolBar'}
                ]]
                ,page: true//开启分页
            });
            //添加导航事件
            $('#add').on('click', function() {
                $.get('addNav.html', null, function(navform) {
                    layer.open({
                        type: 1,
                        title: '添加导航',
                        area: ['600px', '350px'],
                        fixed: false, //不固定
                        maxmin: true,
                        shade: [0.3, '#000'],//遮罩
                        btn: ['保存', '取消'],
                        content: navform,
                        anim:0,//弹出动画
                        yes(index, layero){
                            //do something
                            $('form.layui-form').find('button[lay-filter=addNav]').click();
                            // layer.close(index); //如果设定了yes回调，需进行手工关闭
                        },
                        success(){
                            //弹出窗口成功后渲染表单
                            form.render();
                        },
                        cancel:function(index, layero) {
                            layer.confirm('未保存的数据可能会丢失，确定要关闭吗?', {icon: 3, title: '系统提示'}, function (item) {
                                layer.close(item);//关闭confirm
                                layer.close(index);//关闭弹出层
                            });
                            return false;
                        }
                    });
                })
            });
            //监听工具条
            table.on('tool(navDemo)', function(obj){
                var data = obj.data;
                if(obj.event === 'detail'){
                    layer.msg('ID：'+ data.id + ' 的查看操作');
                } else if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                    $.post('editNav.html', data, function(navform) {
                        //弹出窗口成功后渲染表单
                        var index = layer.open({
                            type: 1,
                            content: navform,
                            area: ['100%', '100%'],
                            success(){
                                //弹出窗口成功后渲染表单
                                form.render();
                                //右上角tips
                                layer.tips('点击这里返回', '.layui-layer-close1', {
                                    tips: 3
                                });
                            },
                        });
                    });
                }
            });
            //全部删除事件
            //获取所有选择的列
            $('#delAll').on('click', function() {
                var names = '';
                $('#content .layui-form .layui-table-box .layui-table-main table tbody tr').each(function() {
                    var _this = $(this);
                    var $cbx = _this.children('td').eq(0).find('.layui-form-checkbox').hasClass('layui-form-checked');
                    if($cbx) {
                        var id = _this.children('td').eq(1).find('div').text();
                        names += id + ',';
                    }
                });
                layer.msg('你选择的ID有：' + names);
            });
        });
    </script>
    <script type="text/html" id="toolBar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"><i class="layui-icon">&#xe857;</i>查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe639;</i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon"></i>删除</a>
    </script>
</body>
</html>